<template>
	<view class="coupon">
	<none-data v-if="couponData.length===0 && isLoading"/>
    <view v-else>
      <view class="coupon_item" :style="{paddingBottom:footerHeight + 'px'}">
        <view class="item" v-for="(item,index) in couponData" :key="index">
          <image :src="item.imgSrc" mode="widthFix"></image>
        </view>
      </view>
      <!-- <view class="footerBtn">
        <view class="footerText"><text>下滑预览更多</text><uni-icons color="#D9D7D9" type="bottom" /></view>
        <view class="footer_Btn">
          <button    >确定</button>
        </view>
      </view> -->
    </view>
	</view>
</template>

<script>
import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
import {getRollNum } from '@/api/user/index.js'
	export default {
  components: { uniIcons },
		data() {
			return {
				couponData:[],
				footerHeight:'',
				isLoading:false
			}
		},
		onLoad() {
			// this.SelectorQuery();
			getRollNum({
				current:1,
				size:5
			}).then((res)=>{
				this.isLoading = true
				res.data.records.map((o)=>{
					o.rollPicList.map((item)=>{
						this.couponData.push({imgSrc:item})
					})

				})
			})
		},
		methods: {
			SelectorQuery(){
				this.$nextTick(() => {
				    const node = uni.createSelectorQuery().select('.footerBtn') // .node为要获取高度的节点类名或选择器
				      .boundingClientRect((rect) => {
				        console.log('节点的总高度', rect.height);
						this.footerHeight = rect.height
				      })
				      .exec();
				  });
			}
		}
	}
</script>

<style scoped lang="less">
@import "@/static/style/global.less";
.no-data {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
  color: #ccc;
  font-size: 32rpx;
  font-family: 'ali-m';

}
	.coupon_item{
		display: flex;
		flex-wrap: wrap;
		padding:0 10rpx;
		.item{
			width: 50%;
			padding: 20rpx;
			box-sizing: border-box;
			image{
				max-width: 100%;
				display: block;
			}
		}
	}
	.footerBtn{
		position: fixed;
		width: 100%;
		background-color: #fff;
		left: 0;
		bottom: 0;
		height: 300rpx;
		.footerText{
			display: flex;
			align-items: center;
			color: #D9D7D9;
			padding: 70rpx 100rpx;
			font-size: 30rpx;
		}
		.footer_Btn{
			padding: 0 40rpx 40rpx;
			button {
				color: @color-font;
				background: @color-blue;
			}
		}
	}
</style>
